<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>2天气属性</title>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>

    <div id="root">
        <h2> {{h2}} </h2>
        <button @click="change"> 点击{{h2}} </button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        let vm = new Vue({
            el: '#root',
            data() {
                return {
                    h5: "哈哈",
                    isHot: false
                }
            },
            computed: {
                h2() {
                    return this.isHot ? "re" : "leng"
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            // watch:{
            //     isHot:{
            //         immediate:true,//初始化时候调用
            //         handler(newValue,oldValue){
            //             console.log(oldValue)
            //             console.log('isHot fixed')
            //             console.log(newValue)
            //         }
            //     }
            // },
        })
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot fixed', oldValue, newValue)
            }
        })
    </script>
</body>

</html>

<!-- 
    watch  KVO  啊 

-->